<template>
  <div>
    <div>
      <img
        class="titleImg"
        src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/17/1581947632898.jpg"
        alt
      />
    </div>
    <div>
      <video
        style="width:100%;object-fit:fill;height:200px;"
        controls="controls"
        autoplay="autoplay"
        loop="loop"
        preload="auto"
        webkit-playsinline="true"
        playsinline="true"
        x5-video-player-type="h5-page"
        x5-video-player-fullscreen="true"
        x-webkit-airplay="allow"
        x5-video-orientation="portraint"
        class="video"
      >
        <source src="http://www.ym718.com/1.mp4" />
      </video>
    </div>
    <div>
      <img
        class="titleImg"
        src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/17/1581947607680.jpg"
        alt
      />
    </div>
    <div class="formSty" id="formSty">
      <div v-for="item in fromData" :key="item.index">
        <label for :class="['iconfont',item.icon,'icons']"></label>
        <input
          :disabled="item.enable"
          :class="!item.btn?'inputs':'getCodeinputs'"
          v-model="item.value"
          :type="item.type"
          :placeholder="item.placeholder"
        />
        <button v-if="item.btn" :disabled="enable" @click="getCode()">{{verification_Info}}</button>
      </div>
      <van-button class="registerBtn" block @click="register()">注册</van-button>
    </div>
    <div class="bottomInfo">
      <div>
        <p>创业导师</p>
        <div>
          <p>微信号码:13333333333</p>
          <p>手机号码:1x333333333</p>
        </div>
      </div>
    </div>
    <div class="tabBtn">
      <van-button class="btn" @click="goRegister()">注册</van-button>
      <van-button class="btn" @click="()=>{$router.push('/login')}">登录</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    fromData: [
      {
        index: 1,
        icon: "icon-contextphone",
        value: null,
				placeholder: "您的手机号",
				type:'text',
        btn: false,
        enable: false
      },
      {
        index: 2,
        icon: "icon-yanzhengma",
        value: null,
        placeholder: "您的手机验证码",
				type:'text',
        btn: true,
        enable: false
      },
      {
        index: 3,
        icon: "icon-beforetype-",
        value: null,
        placeholder: "密码",
				type:'password',
        btn: false,
        enable: false
      },
      {
        index: 4,
        icon: "icon-beforetype-",
        value: null,
        placeholder: "确认密码",
				type:'password',
        btn: false,
        enable: false
      },
      {
        index: 5,
        icon: "icon-beforetype-",
        value: null,
        placeholder: "推荐码",
				type:'text',
        btn: false,
        enable: true
      }
    ],
    num: 300,
    verification_Info: "获取验证码",
    enable: false
	}),
	created() {
    if (this.$route.query.code) {
      this.fromData[4].value = this.$route.query.code;
    }
	},
  methods: {
    getCode() {
      if (this.fromData[0].value) {
        let retu = this.phoneFun(this.fromData[0].value);
        if (retu) {
          let data = {
            phone: this.fromData[0].value,
            sendType: "con_smstype_register"
          };
          this.$axios
            .register(`ym/public/member-send-verifycode`, data)
            .then(msg => {
              //console.log(msg)
              if (msg.status === 200 && msg.data.code === 0) {
                this.$Notify({ type: "success", message: "验证码发送成功!" });
                this.enable = true;
                this.countDown();
              } else if (
                msg.status === 200 &&
                msg.data.code === 1 &&
                msg.data.data.residueSecond > 0
              ) {
                this.enable = true;
                this.num = msg.data.data.residueSecond;
                this.countDown();
                this.$Notify({ type: "warning", message: "验证码还在有效期!" });
              }
            });
        } else {
          this.$Notify({ type: "danger", message: "手机号格式不正确!" });
          return false;
        }
      } else {
        this.$Notify({ type: "danger", message: "请输入手机号!" });
      }
    },
    register() {
      let _frominfo = this.fromData;
      //console.log(_frominfo);
      if (_frominfo[0].value) {
        //console.log(1)
        if (_frominfo[2].value === _frominfo[3].value) {
            if (_frominfo[3].value) {
              let data = {
                phone: _frominfo[0].value,
                password: _frominfo[2].value,
                rePassword: _frominfo[3].value,
                phoneCode: _frominfo[1].value,
                referralCode: _frominfo[4].value
              };
              //console.log(data)
              this.$axios
                .register(`ym/public/member-register`, data)
                .then(res => {
                  //console.log(res)
                  if (res.status === 200 && res.data.code === 0) {
                    this.$Notify({ type: "success", message: "注册成功" });
                    this.$router.push("/login");
                  } else {
                    this.$Notify({ type: "danger", message: res.data.msg });
                  }
                });
            } else {
              this.$Notify({
                type: "danger",
                message: "推荐码不能为空！"
              });
            }
        } else {
          this.$Notify({ type: "danger", message: "密码输入不一致" });
        }
      } else {
          this.$Notify({ type: "danger", message: "请输入手机号" });
      }
    },
    //手机号正则验证
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        return false;
      } else {
        return true;
      }
    },
    countDown() {
      let temp = setTimeout(this.countDown, 1000);
      this.num = this.num - 1;
      this.verification_Info = this.num + "秒后再试";
      if (this.num === 0) {
        // this.verifivationCode = false;
        this.num = 300;
        this.enable = false;
        this.verification_Info = "获取验证码";
        clearTimeout(temp);
      }
    },
    goRegister() {
			// var div = document.getElementById("formSty");
			// //console.log(div)
			// //console.log(div.scrollTop);
			// div.scrollTop = 0
			document.getElementById("formSty").scrollIntoView()
    }
  }
};
</script>
<style lang="scss" scoped>
.titleImg {
  width: 100%;
}
.formSty {
  width: 94%;
  margin: 5px auto;
  border-radius: 4px;
  background: #f2d168;
  padding: 10px 0;
  > div {
    height: 30px;
    line-height: 30px;
    margin: 6px auto;
    width: 90%;
    height: 34px;
    background: #fff;
    position: relative;
    .icons {
      font-size: 22px;
      color: #9d9d9d;
      padding: 0 10px;
    }
    .inputs {
      width: 80%;
      height: 30px;
      color: #9d9d9d;
      outline-style: none;
      border: none;
      border-radius: 3px;
      background: #fff;
      &::placeholder {
        font-size: 12px;
        padding: 0 4px;
      }
    }
    .getCodeinputs {
      width: 62%;
      height: 30px;
      color: #9d9d9d;
      outline-style: none;
      border: none;
      border-radius: 3px;
      &::placeholder {
        font-size: 12px;
        padding: 0 4px;
      }
    }
    button {
      position: absolute;
      right: 0;
      width: 25%;
      height: 100%;
      font-size: 12px;
      border: none;
      background: #71df96;
      color: #fff;
    }
  }
  .registerBtn {
    height: 35px;
    line-height: 35px;
    width: 90%;
    margin: 0 auto;
    border-radius: 2px;
    color: #fff;
    background: #ee7830;
    border: none;
  }
}
.bottomInfo {
  > div {
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    > p {
      margin: 0;
      padding: 10px 0;
      color: #fff;
      text-align: center;
      background: #4392b0;
    }
    > div {
      margin-bottom: 50px;
      border: 1px solid #eee;
      p {
        margin: 0;
        padding: 15px 0;
        text-align: center;
      }
    }
  }
}
.tabBtn {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  .btn {
    width: 50%;
    background: #4392b0;
    color: #fff;
  }
}
</style>